<template>
<!-- <base-content> -->
    <div class="main">
     

<div class="zhezhao" @click="popShow" v-if="showshow"></div>
<div class="pdfItem"  v-if="false">
		<input type="checkbox" v-model="show">
		<select v-model="src" style="width: 30em">
			<option v-for="item in pdfList" :key="item" :value="item" v-text="item"></option>
		</select>
		<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
		<button @click="rotate += 90">&#x27F3;</button>
		<button @click="rotate -= 90">&#x27F2;</button>
    <button @click="bigs">放大</button>
    <button @click="small">缩小</button>
		<button @click="$refs.pdf.print()">print</button>


		<div style="width: 100%;height:100%;left:0%;top:0%" ref="pdfitem" class="item-item"
    v-on:mouseover="changeActive($event)"
     v-on:mouseout="removeActive($event)"
     @mousemove="pdfMove($event)">
			<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
			<pdf v-if="show" ref="pdf" style="border: 1px solid red" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event" ></pdf>
		</div>


	</div>

<div class="next">

    <q-btn label="下一页" @click="nextPage" />
</div>


<div
            style="height: 40rem; width: 100%; border: 1px solid #000; position: relative; overflow: hidden;z-index:10;background-color:#000"
        >
            <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
            <vue-draggable-resizable
                w="auto"
                h="auto"
                :grid="[20,40]"
                :x="10"
                :y="10"
                :resizable="true"
                :lock-aspect-ratio="true"
                style="height: 100%; width: 80%;  position: absolute; z-index:100;"
            >



<div class="pdfItem"  ref="pdfItem">
		<!-- <input type="checkbox" v-model="show">
		<select v-model="src" style="width: 30em">
			<option v-for="item in pdfList" :key="item" :value="item" v-text="item"></option>
		</select>
		<input v-model.number="page" type="number" style="width: 5em"> /{{numPages}}
		<button @click="rotate += 90">&#x27F3;</button>
		<button @click="rotate -= 90">&#x27F2;</button>
    <button @click="bigs">放大</button>
    <button @click="small">缩小</button>
		<button @click="$refs.pdf.print()">print</button> -->

<!-- ref="pdfitem" -->

		<div style="width: 100%;height:100%;"  class="item-item"
   
     ref="table" @wheel.prevent="handleTableWheel($event)">
			<!-- <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div> -->
			<pdf v-if="show" ref="pdf" style="width:100%;height:100%" :src="src" :page="page" :rotate="rotate" @password="password" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event" ></pdf>
		</div>

	</div>


            </vue-draggable-resizable>




    </div>



    </div>

    <!-- </base-content> -->
</template>


<script>

import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'

import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

export default {
  name: 'pdfs',

    data(){
        return {








            // ----------------
          showshow:true,
          moveable: {
      draggable: true,//按住移动了
      // throttleDrag: 0,
      // throttleDrag: 1,
      resizable: false,
      throttleResize: 1,
      keepRatio: true,
      scalable: true,
      throttleScale: 0,
      rotatable: true,
      throttleRotate: 0,
      OriginDraggable:true,
      Roundable:true,
      Groupable:false,
       dragArea: false,//
       edge:false,
       origin :false,
      //  padding : { left: 10, top: 10, right: 10, bottom: 10 },
      //  horizontalGuidelines : [100, 200, 500]
      isDisplaySnapDigit : false,
      dragArea: false,
      bounds: {
    left: 0,
    right: 700,
    top: 0,
    bottom: 700
},

    maxRoundControls : [0, 0],
    roundable: true,
    roundRelative: true,
    roundClickable: true,

    horizontalGuidelines : [100, 200, 500],
    isDisplayInnerSnapDigit : true



    },
    show:true,
			pdfList: [
				'',
				'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
				'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/freeculture.pdf',
				'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/annotation-link-text-popup.pdf',
				'https://cdn.rawgit.com/mozilla/pdf.js/c6e8ca86/test/pdfs/calrgb.pdf',
				'https://cdn.rawgit.com/sayanee/angularjs-pdf/68066e85/example/pdf/relativity.protected.pdf',
				'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMiAwIG9iago8PAogICAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNiAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcgMCBvYmoKPDwgL1R5cGUgL0NhdGFsb2cKICAgL1BhZ2VzIDEgMCBSCj4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDA1ODAgMDAwMDAgbiAKMDAwMDAwMDI1MiAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDAyMzAgMDAwMDAgbiAKMDAwMDAwMDM2NiAwMDAwMCBuIAowMDAwMDAwNjQ1IDAwMDAwIG4gCjAwMDAwMDA3NzIgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA4CiAgIC9Sb290IDcgMCBSCiAgIC9JbmZvIDYgMCBSCj4+CnN0YXJ0eHJlZgo4MjQKJSVFT0YK',
			],
			src:'',
			loadedRatio: 0,
			page: 1,
			numPages: 0,
			rotate: 0,
          // numPages: 0,
			    // page: 1,
			    // currentPage: 0,
          // src:'',
            selected:[],

        }
    },
    props:['data'],
    components:{pdf,VueDraggableResizable},//Moveable,
    methods:{

           handleTableWheel(event) {
            // let obj = this.$refs.table;
            let obj = this.$refs.pdfItem;

            return this.tableZoom(obj, event);
        },
        tableZoom(obj, event) {
            // console.log(obj.style.width,event);
            // 一开始默认是100%
            // let zoom = parseInt(obj.style.zoom, 10) || 100;
            let num = obj.style.width.replace('%','')
            let zoom = parseInt(num, 10) || 100;

            // 滚轮滚一下wheelDelta的值增加或减少120
            zoom += event.wheelDelta / 12;
            if(parseInt(zoom) <15 || parseInt(zoom) >180) return
            console.log('zoom22',zoom);
            if(zoom > 0 ) {
                obj.style.width = zoom + '%'
            }
return false

            // if (zoom > 0) {
            //     obj.style.zoom = zoom + "%";
            // }
            // return false;
        },
        // 单击单元格事件（用于测试拖拽是否阻止了表格默认事件，无关紧要）
        handleCellClick(row) {
            this.$Message.info("你点击了" + row.name);
        },






// handleDrag({ target, left, top }) {
//       console.log('onDrag left, top', left, top);
//       target.style.left = `${left}px`;
//       target.style.top = `${top}px`;
//     },
//     handleResize({
//       target, width, height, delta,
//     }) {
//       console.log('onResize', width, height);
//       delta[0] && (target.style.width = `${width}px`);
//       delta[1] && (target.style.height = `${height}px`);
//     },
//     handleScale({ target, transform, scale }) {
//       console.log('onScale scale', scale);
//       target.style.transform = transform;
//     },
//     handleRotate({ target, dist, transform }) {
//       console.log('onRotate', dist);
//       target.style.transform = transform;
//     },
//     handleWarp({ target, transform }) {
//     //   console.log('onWarp', target);
//       target.style.transform = transform;
//     },



        bigs(num){
          console.log(1);
          console.log(this.$refs.pdfitem.style);
          // this.$refs.pdfitem.style.width = '80%'
          let width = this.$refs.pdfitem.style.width
          width = parseInt(width.replace('%',''))
          width += num
          if(width > 95 || width < 20 ) return 
          this.$refs.pdfitem.style.width = width + '%'
          console.log(width); 
        },
        small(){
          console.log(1);
        },




//鼠标移动
pdfMove(e){
    // console.log('鼠标移动',e);
    return {x:e.layerX,y:e.layerY}
},



      btn(e){
        console.log('点击了',e);
      },
      pdfShow(){
        console.log(11,this.data);
        this.src = pdf.createLoadingTask({ url: this.data[0].pdf, CMapReaderFactory });
        
           this.src.promise.then(pdf => {
	      this.numPages = pdf.numPages;
	    }).catch(err=>err)

        
	
      },


password: function(updatePassword, reason) {

			updatePassword(prompt('password is "test"'));
		},
		error: function(err) {

			console.log(err);
		},

 
// 下一页
nextPage(){
  if(this.page < this.numPages){
    this.page++
  }
},


//关闭弹框
popShow(){
    this.$emit('close')
}


    },
    mounted(){
      
      this.$nextTick(()=>{
        this.pdfShow()
        
      })

      // window.addEventListener('mousewheel',(e)=>{
      //   console.log('滚动',e.deltaY);
      // });


    }
}
</script>

<style scoped lang="less">
.main{
  width: 100%;
  // height: 100%;
  // background-color: red;
  .zhezhao{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #000;
  opacity: .6;
}
.pdfItem{
  z-index: 120;
//   position: absolute;
//   left: 0;
//   top: 0;
//   position: fixed;
//   top: 0;
//   left: 50%;
  // left: 0px;
//   transform: translateX(-50%);
  // transform: translateY(-50%);
background-color: #fff;
background-color: #000;
//   width: 50rem;
//   min-width: 300px;
//   min-height: 300px;
  width: 100%;
//   // height: 30rem;
  height: 100%;
  // position: relative;
  
  
    .item-item{
    cursor: pointer;
    // position: absolute;
    // height: 100%;
    // width: 50%;
  }
  
}

.next{
  position: fixed;
  top: 50%;
  right: 10%;
  // height: ;
  z-index: 30;
  background-color: rgb(43, 62, 170);
  color: #fff;
}

}



</style>